<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <switch></switch>
      <side-menu @indexSelect="listByCategory" ref="sideMenu"></side-menu>
    </el-aside>
    <el-main>
      <word-card class="card-area" ref="wordCard"></word-card>
    </el-main>
  </el-container>
</template>

<script>
  import SideMenu from './SideMenu'
  import WordCard from './WordCard'
  export default {
    name: 'WordIndex',
    components: {SideMenu,WordCard},
    methods: {
      listByCategory() {
        var _this = this
        var cid = this.$refs.sideMenu.cid
        var url ='categories/' + cid + '/words'
        this.$axios.get(url).then(resp =>{
          if (resp && resp.status === 200) {
            _this.$refs.wordCard.words = resp.data
          }
        })
      }
    }
  }
</script>

<style scoped>
  .card-area {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
  }
</style>
